<template>
  <div class="safetyStar">
    <span v-for="(item, index) in showStar" v-html="item" :key="index"></span>
  </div>
</template>

<script>
export default {
  name: 'star',
  props: {
    fraction: {
      type: Number,
      require: true
    }
  },
  computed: {
    showStar () {
      let arr = []
      let len = 5 - this.fraction
      for (let i = 0; i < this.fraction; i++) {
        arr.push(`<i class="icon-store colorStore"></i>`)
      }
      for (let k = 0; k < len; k++) {
        arr.push(`<i class="icon-store grayStore"></i>`)
      }
      return arr
    }
  }
}
</script>
